<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法 插值表达式</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：插值表达式</h1>
            <p>我是变量：{{msg}}</p>
            <p>我是表达式：{{56-89}}</p>
            <p>我是表达式：{{num+1}}</p>
            <p>我是条件运算符：{{1+1==2?'true':'false'}}</p>
            <p>我是方法：{{add()}}</p>
        <h1>知识点2：data</h1>
            <h3>在控制台在可以通过实例名。$data的形式来访问或修改data数据。</h3>
        <h1>知识点3：methods</h1>
            <h3>方法名(){}   或   方法名：function(){}</h3>
            <p>{{sub(100)}}</p>
        <h1>知识点4：computed 计算属性</h1>
            <h3>遇到复杂的逻辑时，vue.js框架提倡使用computed计算属性。在一个计算属性里面可以
                完成各种复杂的逻辑。包括逻辑运算或函数调用等。最终只要返回一个结果就可以了。
            </h3>
            <p>{{reb}}</p>
            <p>{{revMethod()}}</p>
            <p>{{double}}</p>
            <h3>计算属性是基于其依赖值进行缓存的，计算属性只有在它相关的依赖发生改变时才会重新求值，
                而方法则是在每次页面进行重新渲染时都会进行计算。
            </h3>
            <h3>计算属性通常是只读的，不能进行修改</h3>
            <button @click="double=100">我们来尝试修改一下button</button>
            <h3>通过传入一个包含get和set函数的对象。可以得到一个可读可写的计算属性</h3>
            <h3>绝大多数情况下，只有使用默认的get函数来读写一个计算属性，在实际业务中很少使用到set。
                所以我们通过在使用计算属性时，不必将get和set都声明
            </h3>
        <h1>知识点5：watch 监听器</h1>
            <h3>当我们需要在状态变化时，执行一些其他的操作，watch具有状态监听功能
                只要监听到当前vue实例中的数据变化，就会调用当前数据所绑定的方法。
            </h3>
            <h4>1.函数监听器：在watch选项中声明的函数即为函数式监听器。其中函数名就算我们要监听的对象</h4>
            <!--在后台输入appConn.$data.grade=100或50来验证监听效果-->
            <h4>2.对象监听器：在watch选项中声明的对象即为对象式监听器，其中对象名就是我们监听的对象</h4>
            <!--在后台输入appConn.$data.users.age=140 来验证监听效果-->
            <h4>对象式监听器中还有二个参数，deep(true:深层次监听对象)，immediate(true:不管对象有没有改变，都先执行一次)</h4>
            <h4>如果监听的需求比较简单，也不会涉及日后的拓展问题，可以使用函数式侦听器
                如果监听的需求比较复杂，比如有多层对象，或者需要立即执行，或者方便日后拓展，就使用对象式侦听器</h4>
    </div>
</body>
</html>

<script>
    const appConn=Vue.createApp({
        //vue的数据区
        data(){
            return{
                msg:'我的第一个vue页面!',
                num:1,
                grade:60,
                users:{
                    name:'tom',
                    age:18
                }
            }
        },
        //vue的方法放置区
        methods: {
            add(){
                return this.num+100
            },
            sub:function(val){
                return this.num-val
            },
            revMethod(){
                console.log("我是方法，我被调用了一次")
                return this.msg.split('').reverse().join('')
            }
        },
        //vue的计算属性区
        computed:{
            reb(){
                console.log("我是计算属性，我被调用了一次")
                return this.msg.split('').reverse().join('')
            },
            // double(){
            //     return this.num*2
            // }
            double:{
                get:function(){
                    return this.num*2
                },
                set:function(val){
                    this.num=val/2
                }
            }
        },
        //vue的监听区
        watch:{
            //函数式监听器
            grade(newData,oldData){
                console.log('更新前的数据'+oldData);
                console.log('更新后的数据'+newData);
                if(newData>oldData)
                    console.log("有进步，不错");
                else
                    console.log("你看看，考成啥样了！都焦了");
            },
            //对象式监听器
            'users.age':{
                handler(newData,oldData){
                    console.log('更新前的数据'+oldData);
                    console.log('更新后的数据'+newData);
                    if(newData>120||newData<0)
                        console.log("你确定输入的是年龄吗？")
                }
            }
        }
    }).mount('#app')
</script>